<template>
	<div>
		<h1>创建优惠券模板</h1>
		
		<table class="mytable" style="width: 40%;">
			<tr>
				<td>模板名称</td>
				<td><el-input v-model="form.templateName" style="width: 40%;" placeholder="输入模板名称"></el-input></td>
			</tr>
			<tr>
				<td>模板类型</td>
				<td><el-select v-model="form.templateType">
					<el-option
					      key="0"
					      label="使用限制模板"
					      value="0">
					    </el-option>
					<el-option
					      key="1"
					      label="优惠规则模板"
					      value="1">
					    </el-option>
					</el-select>
				</td>
			</tr>
			<tr>
				<td>模板脚本</td>
				<td>
					<el-input v-model="form.script" type="textarea" rows="10" placeholder="Groovy动态脚本"></el-input>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<el-button @click="addFormItem()">添加表单项</el-button>
				</td>
			</tr>
			<tbody v-for="(items,index) in form.formItems">
				<tr>
					<td>动态表单项的标签</td>
					<td><el-input v-model="items.itemTitle" style="width: 40%; margin-right: 10px;" placeholder="表单项的标签"></el-input> 
						<el-button type="danger" @click="removeFormItem(index)">-</el-button></td>
				</tr>
				<tr>
					<td>动态表单项的name</td>
					<td><el-input v-model="items.itemName" style="width: 40%;" placeholder="表单项的name"></el-input></td>
				</tr>
				<tr>
					<td>动态表单项的输入类型</td>
					<td>
						<el-select v-model="items.itemType">
							<el-option
								  key="1"
								  label="文本框"
								  value="1">
								</el-option>
							<el-option
								  key="2"
								  label="日期选择框"
								  value="2">
								</el-option>
						</el-select>
					</td>
				</tr>
			</tbody>
			<tr>
				<td colspan="2">
					<el-button type="success" @click="insertCouponTemplate()">创建优惠券模板</el-button>
				</td>
			</tr>
		</table>
		
		
	</div>
</template>

<script>
	export default {
		//数据部分
		data() {
			return {
				form: {
					templateName: null,
					templateType: null,
					script: null,
					formItems: []
				}
			}
		},
		methods: {
			//添加动态表单项
			addFormItem(){
				//将一个对象{}，添加到表单项集合中
				this.form.formItems.push({
					itemTitle: null,
					itemName: null,
					itemType: null
				});
			},
			//删除动态表单项
			removeFormItem(index){
				console.log("需要移除的下标：", index);
				this.form.formItems.splice(index,1);
			},
			//新增优惠券模板
			insertCouponTemplate(){
				console.log("提交的模板数据：", this.form);
				this.$.ajax({
					type: "POST",
					url: "/coupon/template/insert",
					data: this.form,
					success: (res) => {
						this.$message.success("模板创建成功！");
					}
				})
			}
		}
	}
</script>

<style>
	.mytable tr td {
		padding: 5px 0px;
	}
</style>